<template>
  <div>
    <div class="title">热销推荐</div>
    <ul>
      <router-link
      class="item border-bottom"
      v-for="item in recommendList"
      :key="item.id"
      :to="'/detail/' + item.id"
      >
        <img :src="item.imgUrl" alt="" class="item-img">
        <div class="item-info">
          <p class="item-title item-p">{{item.title}}</p>
          <p class="item-desc item-p">{{item.desc}}</p>
          <button class="item-button">查看详情</button>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  // data () {
  //   return {
  //     recommendList: [{
  //       id: '001',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/p0/1701/86/86b1c1cafc8bb640a3.img.jpg_200x200_871f8ca0.jpg',
  //       title: '大连圣亚海洋世界',
  //       desc: '浪漫大连首站，浪漫的海洋主题乐园'
  //     }, {id: '002',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/p0/2104/c6/c6d76981ae21f58ea3.water.jpg_200x200_7eeed74c.jpg',
  //       title: '上海迪士尼乐园',
  //       desc: '身临其境地感受神奇王国'
  //     }, {id: '003',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg',
  //       title: '北京故宫博物院',
  //       desc: '故宫又称紫禁城，是明、清两代的皇宫，也是古老中国的标志和象征'
  //     }, {id: '004',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/p0/1611/96/96c7b547622c8334a3.img.jpg_200x200_cd0b30b0.jpg',
  //       title: '清华大学',
  //       desc: '清华大学是中国知名的大学之一。'
  //     }, {id: '005',
  //       imgUrl: 'https://imgs.qunarzz.com/sight/p0/1411/61/d92ba6a30aa12eb0a9a4a9c82214cb8e.water.jpg_200x200_eebad140.jpg',
  //       title: '秦始皇帝陵博物院（兵马俑）',
  //       desc: '是中国古代雕塑艺术史上的一颗璀璨明珠，被誉为“二十世纪考古史上的伟大发现之一'
  //     } ]
  //   }
  // },
  props: {
    recommendList: Array
  }
}
</script>

<style scoped>
  .title{
    margin-top: .2rem;
    line-height: .8rem;
    background: #eee;
    text-indent: .2rem;
  }
  .item{
    display: flex;
    height: 1.9rem;
    /* background: red; */
    overflow: hidden;
  }
  .item-img{
    padding: .1rem;
    width: 1.7rem;
    height: 1.7rem;
  }
  .item-info{
    flex: 1;
    padding: .1rem;
    min-width: 0;
  }
  .item-title{
    line-height: .54rem;
    font-size: .32rem;
  }
  .item-desc{
    line-height: .4rem;
  }
  .item-p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-button{
    background: #ff9300;
    padding:0 .2rem;
    color: #fff;
    margin-top: .16rem;
    border-radius: .06rem;
    line-height: .44rem;
  }
</style>
